<!DOCTYPE html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <title>杭州市民体验日</title>
    <meta name="description" content="">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui, user-scalable=no">
    <meta http-equiv="cleartype" content="on">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="/assets/activity/footprint/css/index.css">
    <link rel="stylesheet" href="/assets/activity/footprint/css/font.css">
    <link rel="stylesheet" href="/assets/activity/footprint/css/color.css">
    <link rel="stylesheet" href="/assets/activity/footprint/css/detailroute.css">
	<link rel="stylesheet" type="text/css" href="/assets/activity/footprint/css/notice.css" />
	<script src="/assets/activity/footprint/js/jquery-2.1.0.min.js"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script src="/assets/activity/footprint/js/notice.js"></script>
    <script>
        $(window).load(function(){
            $('.pop-box1').hide();
        });
        /*rule*/
        $(function(){
            $('.rule').click(function(){
                $('#rule').show();
                var height = $('#rule').height();
                $('.jianjie').css({"height":height*0.74,"overflow":"auto","line-height":2});
            });
            $('.close-btn').click(function(){
                $('#rule').hide();
            });
        });
    </script>
</head>

<body>
<div class="wraper">
	<include file="Activity:Footprint:popbox"/>
    <div class="top bg-color{BEESCRM:$color_class}">
        <div class="logobox fl-left">
            <img class="logo1" src="/assets/activity/footprint/images/logo1.png"/>
            <img class="logo2" src="/assets/activity/footprint/images/logo2.png"/>
        </div>
        <div class="title fl-left">杭州市民体验日预约线路</div>
        <div class="rule fl-left" id="app-rule">活动规则</div>
    </div>
    <div class="user clearfix">
        <a class="theme bg-color{BEESCRM:$color_class}">{BEESCRM:$data.color_value} {BEESCRM:$data.theme}</a>
        <a href="#" class="routemark fl-right">{BEESCRM:$data.name}<span class="trangle-right"></span></a>
    </div>
    <if condition="$color_class eq 1">
		<div class="magnifier">
			<img src="/assets/activity/footprint/images/magnifier.png"/>
			<volist name="data.Point" id="vo" key="i">
				<if condition="$vo.type eq 1">
					<a class="iconfont icon-dizhidingwei text-color{BEESCRM:$color_class} normal line-map <eq name='i' value='1'>check</eq>" id="magnifier{BEESCRM:$i}" data-id="{BEESCRM:$vo.point_id}" data-name="{BEESCRM:$vo.point_name}" data-type="{BEESCRM:$vo.type}" data-color-class="{BEESCRM:$color_class}"></a>
					<else/>
					<a class="iconfont icon-fenxiang text-color{BEESCRM:$color_class} normal line-map" id="magnifier{BEESCRM:$i}" data-id="{BEESCRM:$vo.point_id}"  data-name="{BEESCRM:$vo.point_name}" data-type="{BEESCRM:$vo.type}"></a>
				</if>
			</volist>
		</div>
		<elseif condition="$color_class eq 2"/>
		<div class="book">
			<img src="/assets/activity/footprint/images/book.png"/>
			<volist name="data.Point" id="vo" key="i">
				<if condition="$vo.type eq 1">
					<a class="iconfont icon-dizhidingwei text-color{BEESCRM:$color_class} normal line-map <eq name='i' value='1'>check</eq>" id="book{BEESCRM:$i}" data-id="{BEESCRM:$vo.point_id}" data-name="{BEESCRM:$vo.point_name}" data-type="{BEESCRM:$vo.type}" data-color-class="{BEESCRM:$color_class}"></a>
					<else/>
					<a class="iconfont icon-fenxiang text-color{BEESCRM:$color_class} normal line-map" id="book{BEESCRM:$i}" data-id="{BEESCRM:$vo.point_id}"  data-name="{BEESCRM:$vo.point_name}" data-type="{BEESCRM:$vo.type}"></a>
				</if>
			</volist>
		</div>
		<elseif condition="$color_class eq 3"/>
		<div class="dabai">
			<img src="/assets/activity/footprint/images/dabai.png"/>

			<volist name="data.Point" id="vo" key="i">
				<if condition="$vo.type eq 1">
					<a class="iconfont icon-dizhidingwei text-color{BEESCRM:$color_class} normal line-map <eq name='i' value='1'>check</eq>" id="dabai{BEESCRM:$i}" data-id="{BEESCRM:$vo.point_id}" data-name="{BEESCRM:$vo.point_name}" data-type="{BEESCRM:$vo.type}" data-color-class="{BEESCRM:$color_class}"></a>
					<else/>
					<a class="iconfont icon-fenxiang text-color{BEESCRM:$color_class} normal line-map" id="dabai{BEESCRM:$i}" data-id="{BEESCRM:$vo.point_id}"  data-name="{BEESCRM:$vo.point_name}" data-type="{BEESCRM:$vo.type}"></a>
				</if>
			</volist>

		</div>
		<elseif condition="$color_class eq 4"/>
		<div class="model">
			<img src="/assets/activity/footprint/images/model.png"/>
			<volist name="data.Point" id="vo" key="i">
				<if condition="$vo.type eq 1">
					<a class="iconfont icon-dizhidingwei text-color{BEESCRM:$color_class} normal line-map <eq name='i' value='1'>check</eq>" id="model{BEESCRM:$i}" data-id="{BEESCRM:$vo.point_id}" data-name="{BEESCRM:$vo.point_name}" data-type="{BEESCRM:$vo.type}" data-color-class="{BEESCRM:$color_class}"></a>
					<else/>
					<a class="iconfont icon-fenxiang text-color{BEESCRM:$color_class} normal line-map" id="model{BEESCRM:$i}" data-id="{BEESCRM:$vo.point_id}"  data-name="{BEESCRM:$vo.point_name}" data-type="{BEESCRM:$vo.type}"></a>
				</if>
			</volist>
		</div>
		<elseif condition="$color_class eq 5"/>
		<div class="canteen">
			<img src="/assets/activity/footprint/images/canteen.png"/>
			<volist name="data.Point" id="vo" key="i">
				<if condition="$vo.type eq 1">
					<a class="iconfont icon-dizhidingwei text-color{BEESCRM:$color_class} normal line-map <eq name='i' value='1'>check</eq> " id="canteen{BEESCRM:$i}" data-id="{BEESCRM:$vo.point_id}" data-name="{BEESCRM:$vo.point_name}" data-type="{BEESCRM:$vo.type}" data-color-class="{BEESCRM:$color_class}"></a>
					<else/>
					<a class="iconfont icon-fenxiang text-color{BEESCRM:$color_class} normal line-map" id="canteen{BEESCRM:$i}" data-id="{BEESCRM:$vo.point_id}"  data-name="{BEESCRM:$vo.point_name}" data-type="{BEESCRM:$vo.type}"></a>
				</if>
			</volist>
		</div>
		<elseif condition="$color_class eq 6"/>
		<div class="pavilion">
			<img src="/assets/activity/footprint/images/pavilion.png"/>
			<volist name="data.Point" id="vo" key="i">
				<if condition="$vo.type eq 1">
					<a class="iconfont icon-dizhidingwei text-color{BEESCRM:$color_class} normal line-map <eq name='i' value='1'>check</eq>" id="pavilion{BEESCRM:$i}" data-id="{BEESCRM:$vo.point_id}" data-name="{BEESCRM:$vo.point_name}" data-type="{BEESCRM:$vo.type}" data-color-class="{BEESCRM:$color_class}"></a>
					<else/>
					<a class="iconfont icon-fenxiang text-color{BEESCRM:$color_class} normal line-map" id="pavilion{BEESCRM:$i}" data-id="{BEESCRM:$vo.point_id}"  data-name="{BEESCRM:$vo.point_name}" data-type="{BEESCRM:$vo.type}"></a>
				</if>
			</volist>
		</div>
		<elseif condition="$color_class eq 7"/>
		<div class="bridge">
			<img src="/assets/activity/footprint/images/bridge.png"/>
			<volist name="data.Point" id="vo" key="i">
				<if condition="$vo.type eq 1">
					<a class="iconfont icon-dizhidingwei text-color{BEESCRM:$color_class} normal line-map <eq name='i' value='1'>check</eq>" id="bridge{BEESCRM:$i}" data-id="{BEESCRM:$vo.point_id}" data-name="{BEESCRM:$vo.point_name}" data-type="{BEESCRM:$vo.type}" data-color-class="{BEESCRM:$color_class}"></a>
					<else/>
					<a class="iconfont icon-fenxiang text-color{BEESCRM:$color_class} normal line-map" id="bridge{BEESCRM:$i}" data-id="{BEESCRM:$vo.point_id}"  data-name="{BEESCRM:$vo.point_name}" data-type="{BEESCRM:$vo.type}"></a>
				</if>
			</volist>
		</div>
	</if>
    <!-- <div class="dabai">
        <img src="/assets/activity/footprint/images/dabai.png"/>
        <span class="iconfont icon-dizhidingwei text-color3 normal" id="dabai1"></span>
        <span class="iconfont icon-dizhidingwei text-color3 normal" id="dabai2"></span>
        <span class="iconfont icon-dizhidingwei text-color3 normal" id="dabai3"></span>
        <span class="iconfont icon-dizhidingwei text-color3 normal" id="dabai4"></span>
        <span class="iconfont icon-dizhidingwei text-color3 normal" id="dabai5"></span>
        <span class="iconfont icon-fenxiang text-color3 normal" id="dabai6"></span>
        <span class="iconfont icon-dizhidingwei text-color3 normal" id="dabai7"></span>
        <span class="iconfont icon-dizhidingwei text-color3 normal check" id="dabai8"></span>
    </div>
    <div class="magnifier">
        <img src="/assets/activity/footprint/images/magnifier.png"/>
        <span class="iconfont icon-dizhidingwei text-color1 normal" id="magnifier1"></span>
        <span class="iconfont icon-dizhidingwei text-color1 normal" id="magnifier2"></span>
        <span class="iconfont icon-dizhidingwei text-color1 normal" id="magnifier3"></span>
        <span class="iconfont icon-dizhidingwei text-color1 normal" id="magnifier4"></span>
        <span class="iconfont icon-dizhidingwei text-color1 normal" id="magnifier5"></span>
        <span class="iconfont icon-fenxiang text-color1 normal" id="magnifier6"></span>
        <span class="iconfont icon-dizhidingwei text-color1 normal" id="magnifier7"></span>
        <span class="iconfont icon-dizhidingwei text-color1 normal check" id="magnifier8"></span>
    </div>
    <div class="book">
        <img src="/assets/activity/footprint/images/book.png"/>
        <span class="iconfont icon-dizhidingwei text-color2 normal" id="book1"></span>
        <span class="iconfont icon-dizhidingwei text-color2 normal" id="book2"></span>
        <span class="iconfont icon-dizhidingwei text-color2 normal" id="book3"></span>
        <span class="iconfont icon-dizhidingwei text-color2 normal" id="book4"></span>
        <span class="iconfont icon-dizhidingwei text-color2 normal" id="book5"></span>
        <span class="iconfont icon-fenxiang text-color2 normal" id="book6"></span>
        <span class="iconfont icon-dizhidingwei text-color2 normal" id="book7"></span>
        <span class="iconfont icon-dizhidingwei text-color2 normal check" id="book8"></span>
    </div>
    <div class="canteen">
        <img src="/assets/activity/footprint/images/canteen.png"/>
        <span class="iconfont icon-dizhidingwei text-color5 normal" id="canteen1"></span>
        <span class="iconfont icon-dizhidingwei text-color5 normal" id="canteen2"></span>
        <span class="iconfont icon-dizhidingwei text-color5 normal" id="canteen3"></span>
        <span class="iconfont icon-dizhidingwei text-color5 normal" id="canteen4"></span>
        <span class="iconfont icon-dizhidingwei text-color5 normal" id="canteen5"></span>
        <span class="iconfont icon-fenxiang text-color5 normal" id="canteen6"></span>
        <span class="iconfont icon-dizhidingwei text-color5 normal" id="canteen7"></span>
        <span class="iconfont icon-dizhidingwei text-color5 normal check" id="canteen8"></span>
    </div>
    <div class="bridge">
        <img src="/assets/activity/footprint/images/bridge.png"/>
        <span class="iconfont icon-dizhidingwei text-color7 normal" id="bridge1"></span>
        <span class="iconfont icon-dizhidingwei text-color7 normal" id="bridge2"></span>
        <span class="iconfont icon-dizhidingwei text-color7 normal" id="bridge3"></span>
        <span class="iconfont icon-dizhidingwei text-color7 normal" id="bridge4"></span>
        <span class="iconfont icon-dizhidingwei text-color7 normal" id="bridge5"></span>
        <span class="iconfont icon-fenxiang text-color7 normal" id="bridge6"></span>
        <span class="iconfont icon-dizhidingwei text-color7 normal" id="bridge7"></span>
        <span class="iconfont icon-dizhidingwei text-color7 normal check" id="bridge8"></span>
    </div>
    <div class="model">
        <img src="/assets/activity/footprint/images/model.png"/>
        <span class="iconfont icon-dizhidingwei text-color4 normal" id="model1"></span>
        <span class="iconfont icon-dizhidingwei text-color4 normal" id="model2"></span>
        <span class="iconfont icon-dizhidingwei text-color4 normal" id="model3"></span>
        <span class="iconfont icon-dizhidingwei text-color4 normal" id="model4"></span>
        <span class="iconfont icon-dizhidingwei text-color4 normal" id="model5"></span>
        <span class="iconfont icon-fenxiang text-color4 normal" id="model6"></span>
        <span class="iconfont icon-dizhidingwei text-color4 normal" id="model7"></span>
        <span class="iconfont icon-dizhidingwei text-color4 normal check" id="model8"></span>
    </div>
    <div class="pavilion">
        <img src="/assets/activity/footprint/images/pavilion.png"/>
        <span class="iconfont icon-dizhidingwei text-color6 normal" id="pavilion1"></span>
        <span class="iconfont icon-dizhidingwei text-color6 normal" id="pavilion2"></span>
        <span class="iconfont icon-dizhidingwei text-color6 normal" id="pavilion3"></span>
        <span class="iconfont icon-dizhidingwei text-color6 normal" id="pavilion4"></span>
        <span class="iconfont icon-dizhidingwei text-color6 normal" id="pavilion5"></span>
        <span class="iconfont icon-fenxiang text-color6 normal" id="pavilion6"></span>
        <span class="iconfont icon-dizhidingwei text-color6 normal" id="pavilion7"></span>
        <span class="iconfont icon-dizhidingwei text-color6 normal check" id="pavilion8"></span>
    </div> -->
    <a href="<eq name='havePoint' value='1'>{BEESCRM::U('/Activity/Footprint/detail',array('wechat_id'=>$wechat_id,'act_id'=>$act_id, 'point_id' => $point_id, 'class' => $color_class,'route' => 2))}<else/> javascript:;</eq>" class="tab-place text-color{BEESCRM:$color_class}" id="line_point">
    	<span class="line_point">{BEESCRM:$point_name}</span>
        <span class="iconfont icon-you text-color{BEESCRM:$color_class} fl-right"></span>
        <span class="trangle-top"></span>
        <input type="hidden" id="wechat_id" value="{BEESCRM:$wechat_id}"/>
		<input type="hidden" id="act_id" value="{BEESCRM:$act_id}"/>
    </a>
    <div class="subscribe marginb-55">
        <h3>{BEESCRM:$data.color_value} <span class="circle bg-color{BEESCRM:$color_class}"></span> {BEESCRM:$data.theme}</h3>
        <p>{BEESCRM:$data.description}</p>
    </div>
    <div class="btn-box">
    	<if condition="$time">
    		<a href="#" class="big-btn btn fl-left bg-color8" id="order">预约路线</a>
    	<else/>
    		<a href="#" class="big-btn btn fl-left bg-color8">暂无可预约时间</a>
    	</if>
    </div>

    <div class="pop-box" id="sharebox">
        <div class="share"><img src="/assets/activity/footprint/images/share.png"/></div>
        <div class="main">
            <p class="warming">邀请好友</p>
            <p>加入城市体验之旅，创造</p>
            <p>属于我们的记忆</p>
            <a class="share-btn">火速分享</a>
        </div>
    </div>
    
    <div class="pop-box" id="appointment">
        <div class="pop clearfix">
            <div class="prize picture white fl-left">
	            <if condition="$firstFlash">
	            	<img src="{BEESCRM:$firstFlash}"/>
	            <else/>
	            	<img src="/assets/activity/footprint/images/center-bg.jpg"/>	
	            </if>
            </div>
            
            <p class="prize-name fl-left">
                <span>{BEESCRM:$data.name}</span>
                <span>最多参观人数（{BEESCRM:$data.max_num}人）</span>
            </p>
            <span class="iconfont icon-guanbi guanbi"></span>
            <div class="order-box fl-left">
                <p class="grade">选择参观时间</p>
                <volist name="time" id="vo">
	                <div class="time-box fl-left select-time" data-remain="{BEESCRM:$vo.remain}" data-time="{BEESCRM:$vo.time}">
	                    <p>{BEESCRM:$vo.time|date='m月d日',###}</p>
	                    <p><if condition="date('H',$vo['time']) lt 12">上午<else/>下午</if>{BEESCRM:$vo.time|date='H:i',###}</p>
	                    <p>（<span class="text-color10">{BEESCRM:$vo.count}</span>/{BEESCRM:$data.max_num}）</p>
	                </div>
	            </volist>
                <input class="input" type="text" id='number' placeholder="请填写参观人数" />
                <input class="input" type="text" id='visitor' placeholder="姓名"/>
                <input class="input" type="text" id='mobile' placeholder="电话"/>
            </div>
            <div>
                <a href="javascript:void(0)" class="big-btn btn fl-left bg-color8" id="submit">确认提交</a>
            </div>
        </div>
    </div>
    <div class="pop-box" id="success">
        <span class="iconfont icon-duigou duigou" style="font-size: 60px"></span>
        <div class="main">
            <p class="warming">预约成功</p>
            <p>恭喜，您已成功预定本体验的席位！</p>
            <p>需满团才能开启体验之旅，如人数不足，工作人员将与您电话联系。</p>
            <p>客服电话 0571-87019367</p>
            <div>
                <a class="share-btn" id="goback">返回体验点</a>
                <a href="{BEESCRM::U('activity/footprint/ucenter',array('act_id'=>$act_id,'wechat_id'=>$wechat_id,'route'=>1))}" class="share-btn" id="gohome">前往个人中心</a>
            </div>
        </div>
    </div>
    
</div>

<script src="/assets/activity/footprint/js/jquery-2.1.0.min.js"></script>
<script>
$('.select-time').on('click',function(){
	$(this).addClass('select_time_actived').siblings('.select-time').removeClass('select_time_actived');
});

$('#goback').on('click',function(){
	window.location.reload();
});

//预约报名
$(document).ready(function(){
	$(document).on('click','#submit',function(){
		var number=$('#number').val();
		var visitor=$('#visitor').val();
		var mobile=$('#mobile').val();
		var remain=$('.select_time_actived').data('remain');
		var time=$('.select_time_actived').data('time');
		var pid="{BEESCRM:$line_id}";
		var fans_id="{BEESCRM:$fans_id}";
		var name="{BEESCRM:$data.name}";
		var wechat_id="{BEESCRM:$wechat_id}";
		var act_id="{BEESCRM:$act_id}";
		var myreg = /^0?1[3|4|5|8][0-9]\d{8}$/;
		if(!time){
			infotips('请选择预约时间',$('.submit_tips'));return;
		}else if(!number || isNaN(number)){
			infotips('请填写正确的参观人数',$('.submit_tips'));return;
		}else if(Number(number)>Number(remain)){
			infotips('名额不足',$('.submit_tips'));return;
		}else if(!visitor){
			infotips('请输入姓名',$('.submit_tips'));return;
		}else if(!myreg.test(mobile)){
			infotips('请输入正确的手机号',$('.submit_tips'));return;
		}
		
		$.ajax({
			type:'json',
			method:'post',
			url:'/activity/footprint/addAppoint/act_id/'+act_id+'/wechat_id/'+wechat_id,
			data:{
				'type':0,
				'pid':pid,
				'fans_id':fans_id,
				'visitor':visitor,
				'name':name,
				'mobile':mobile,
				'number':number,
				'visit_time':time,
				'wechat_id':wechat_id,
				'act_id':act_id,
			},
			success:function(data){
				var json;
				json=$.parseJSON(data)
				if(json.status=='S'){
					infotips(json.message,$('.submit_tips'),'right');
					$('#success').show();
				}else{
					infotips(json.message,$('.submit_tips'));
				}
			},
			error:function(){
				infotips('通讯错误',$('.submit_tips'));
			}
		});
		$('#appointment').hide();
		
	});
});

	$('#order').click(function(){
	    $('#appointment').show();
	});
	$('.guanbi').click(function(){
        $('#appointment').hide();
    });
    $('#share').click(function(){
        $('#sharebox').show();
    });
    $('.share-btn').click(function(){
        $('#sharebox').hide();
    });

    $('.dabai').on('click','span',function(){
        $(this).toggleClass('check').siblings().removeClass('check');
    });
    
    
  //切换点选项信息
	$(document).on('click','.line-map',function(){
		var wechat_id = $('#wechat_id').val();
		var act_id = $('#act_id').val();
		var type = $(this).data('type');
		var name = $(this).data('name');
		var id = $(this).data('id');
		var color_class = $(this).data('color-class');
		if(type == 1){
			$(".line_point").html(name);
			$("#line_point").attr('href','/Activity/Footprint/detail/wechat_id/'+wechat_id+'/act_id/'+act_id+'/point_id/'+id+'/class/'+color_class+'/route/2').removeClass('share-point');
		}else{
			$(".line_point").html(name);
			$("#line_point").attr('href','javascript:;').addClass('share-point');
		}

	});
    
    var array = ['dabai' , 'magnifier' , 'book' , 'model' , 'bridge' , 'pavilion' , 'canteen'];
	for(var i= 0;i<array.length;i++){
		$('.'+array[i]).on('click','a',function(){
			var share_point_id='{BEESCRM:$share_point_id}';		//分享点亮点
			//分享点亮体验点
			if($(this).data('id')==share_point_id){
				share_callback_url_extend='/share_point_id/'+share_point_id;
			}else{
				share_callback_url_extend='';
			}
			$(this).addClass('check').siblings().removeClass('check');
		});
		$('.'+array[i]).on('click','.check',function(){
			var wechat_id = $('#wechat_id').val();
			var act_id = $('#act_id').val();
			var type = $(this).data('type');
			var name = $(this).data('name');
			var id = $(this).data('id');
			var color_class = $(this).data('color-class');
			if(type == 1){
				$(this).attr('href','/Activity/Footprint/detail/wechat_id/'+wechat_id+'/act_id/'+act_id+'/point_id/'+id+'/class/'+color_class+'route/2').removeClass('share-point');
			}else{
				$(this).attr('href','javascript:;').addClass('share-point');
			}

		});
	}
</script>
</body>

</html>
